<template>
  <div >
      <div>
        <div class="form">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="产品图片" prop="image">
              <el-upload
                class="upload-demo"
                ref="upload"
                action=""
                :with-credentials="true"
                :http-request="httpRequest"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                file-list=""
                list-type="picture"
                :auto-upload="false">
                <el-button size="small" type="primary" >点击上传</el-button>
                <div slot="tip" class="el-upload__tip">只能上传一张jpg/png文件，且不超过500kb</div>
              </el-upload>
            </el-form-item>
            <el-form-item label="产品名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="产品类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择产品类型" style="width: 100%">
                <el-option
                  v-for="item in form.types"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品描述">
              <el-input v-model="form.description"></el-input>
            </el-form-item>
            <el-form-item label="产品内容">
              <UEditor :config=config ref="ueditor"></UEditor>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="getContent">上传产品</el-button>
            </el-form-item>

          </el-form>
        </div>


<!--        <button size="primary" type="info" icon="plus" @click="getContent">获取内容</button>-->
      </div>
  </div>
</template>

<script>

  import UEditor from "../../UEditor";
  import axios from 'axios';
  import {requestGet, requestPost} from "../../../../network/request";
  export default{
      name: 'hello',
    components: {UEditor},
    data(){
        return {
          currentId: '',
          form: {
            image: '',
            name: '',
            description: '',
            type: '',
            types: [{
              value: 'web',
              label: 'web'
            }, {
              value: 'pc',
              label: 'pc'
            }, {
              value: 'mobile',
              label: 'mobile'
            }]
          },
          config: {
            //可以在此处定义工具栏的内容
            // toolbars: [
            //  ['fullscreen', 'undo', 'redo','|','bold', 'italic', 'underline',
            //  '|','superscript','subscript','|', 'insertorderedlist', 'insertunorderedlist',
            //  '|','fontfamily','fontsize','justifyleft','justifyright','justifycenter','justifyjustify']
            // ],
            autoHeightEnabled: false,
            autoFloatEnabled: true,
            initialContent:'请输入内容',   //初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
            autoClearinitialContent:true, //是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
            initialFrameWidth: null,
            initialFrameHeight: 450,
            BaseUrl: '',
            UEDITOR_HOME_URL: 'static/ueditor/'
          },
          addFormVisible: false
        }
      },
    mounted() {
        //查找目前所在的id
    },
    methods: {
      // param是自带参数。 this.$refs.upload.submit() 会自动调用 httpRequest方法.在里面取得file
      httpRequest(param) {
        let img = param.file; // 相当于input里取得的files
        let fd = new FormData();// FormData 对象
        let content = this.$refs.ueditor.getUEContent();
        fd.append('image', img);// 文件对象
        fd.append('html',content);
        fd.append('name',this.form.name);
        fd.append('type',this.form.type);
        fd.append('description',this.form.description);
        let config = {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        }
        let url = 'http://localhost:8080/product/image'
        axios.post(url, fd, config).then(res=>{
          if(res.code===0){
            this.submitForm();//提交表单
          }
        })
        alert("上传成功")
        this.$router.replace("/content/product");
      },

      //上传成功后显示图片
        handleRemove(file, fileList) {
          console.log(file, fileList);
        },
        handlePreview(file) {
          console.log(file);
        },
        //获取文档内容 上传产品信息 图片在上面的action里面提交
        getContent: function(){
          this.$refs.upload.submit()
        }
      }
  }

</script>
<style>
  .form{
    text-align: center;
    margin: 0 auto;
  }
</style>
